<template>
  <div class="virtual-tree-box">
    <virtual-tree
      ref="huge-tree"
      :item-height="32"
      style="margin-right: 2px;height: calc(100% - 32px)"
      checked-action="dblclick"
      :extend-filter="extendFilter"
      item-class="vehicle-tree-item"
      label-class="dept-tree-label"
      expand-level="all"
      :options="treeOptions"
      :indent="12"
      :count-options="countOptions"
      :checkbox-options="checkOptions"
      :is-loading="isLoading"
      :check-strictly="false"
      @onClickCheckbox="onClickCheckbox"
      @onClickItem="onClickItem"
      @onInit="onInit"
      @onRightClickItem="onRightClick"
    >
      <template #customSearch="{ search, reset }">
        <v-tree-custom-search
          :search="search"
          :reset="reset"
          :show-tab="true"
          :all-count="count.isVehicleCount_"
          :offline-count="c_offline"
          :online-count="count.onlineFlagCount_"
          @tabChange="tabChange"
        />
      </template>

      <template #default="{ item }">
        <div class="label-box">
          <template v-if="item.isVehicle">
            <div class="vehicle-icon" :class="[item.onlineFlag ? 'online-icon' : 'offline-icon']" />
            <div class="vehicle-text">{{ item.plateNum }}</div>
          </template>
          <div v-else class="dept-and-count">
            <div>{{ item.deptName }}</div>

            <div v-if="(!item.isLeaf || !item.hasOwnProperty('isVehicle'))">
              ({{ item.onlineFlagCount_ }}/{{item.isVehicleCount_}})
            </div>
          </div>
        </div>
      </template>
      <template #loading>
        <div><i class="el-icon el-icon-loading" />加载中...</div>
      </template>
    </virtual-tree>
    <slot />
  </div>
</template>

<script>
  /**
   * 组件说明:
   * 创建者: Q
   * 创建时间: 2021/8/18  16:31
   *
   */
  import VirtualTree from '../../index.vue';
  import VTreeCustomSearch from './v-tree-custom-search/v-tree-custom-search.vue'
  export default {
    name: 'VehicleTree',
    components: { VirtualTree, VTreeCustomSearch },
    data() {
      return {
        checkOptions: { showCheckbox: true, preCheckbox: false, checkBoxSize: '16px', showCheckboxByKeys: null },
        count: {
          isVehicleCount_: 0,
          onlineFlagCount_: 0
        },
        treeOptions: {
          parentIdKey: 'pid',
          labelKey: 'deptName',
          labelExtendKey: 'plateNum'
        },
        extendFilter: null,
        countOptions: {
          computed: true,
          countKey: 'isVehicle',
          extendCount: [
            {key: 'onlineFlag',value: false},
            {key: 'isVehicle', value: true}
          ]
        },
        isLoading: false,
        expand: true
      }
    },
    computed: {
      c_offline() {
        return this.count.isVehicleCount_ - this.count.onlineFlagCount_
      }
    },
    created() {
      this.getVehicleTree()
    },
    methods: {
      async tabChange(e) {
        const checkedKeys = this.$refs['huge-tree'].getCheckedNodes().filter(item => item.isVehicle).map(item => item.id)
        switch (e) {
          case 1:
            this.extendFilter = null
            break
          case 2:
            this.extendFilter = [{onlineFlag: true, isVehicle: undefined}]
            break
          case 3:
            this.extendFilter = [{onlineFlag: false, isVehicle: undefined}]
            break
          default:
            this.extendFilter = null
            break
        }
        // 不能省略 ,否则setCheckedKeys时. 数据未更新
        await this.$nextTick()
        this.$refs['huge-tree'].setCheckedKeys(checkedKeys)
      },
      // tabChange(e) {
      //   switch (e) {
      //     case 1:
      //       this.extendFilter = null
      //       break
      //     case 2:
      //       this.extendFilter = [{ onlineFlag: true, isVehicle: undefined }]
      //       break
      //     case 3:
      //       this.extendFilter = [{ onlineFlag: false, isVehicle: undefined }]
      //       break
      //     default:
      //       this.extendFilter = null
      //       break
      //   }
      // },
      onInit(e) {
        this.count = e.count
      },
      setTree() {
        const testChildren = []
        for (let i = 0; i < 10; i++) {
          testChildren.push({"id":"142244085894354944" + i,"plateNum":"浙FD" + i,"onlineFlag":false,"deptId":"1417405551152037889","isVehicle":true})
        }
        // const testChildren = [{"id":"1422440858943549441","plateNum":"浙FD1233","onlineFlag":false,"deptId":"1417405551152037889","isVehicle":true},{"id":"1422718441291603970","plateNum":"浙FD3212","onlineFlag":false,"deptId":"1417405551152037889","isVehicle":true}]
        const tree = [{"id":"1","deptName":"公司默认部门","level":1,"children":[{"id":"1422723082058293249","plateNum":"浙FD1111","onlineFlag":true,"deptId":"1","isVehicle":true},{"id":"1413306765261570049","deptName":"test","level":2,"children":[{"id":"1423522080721526786","plateNum":"浙FA0806","onlineFlag":false,"deptId":"1413306765261570049","isVehicle":true},{"id":"1424620910896537601","plateNum":"浙FD0809","onlineFlag":false,"deptId":"1413306765261570049","isVehicle":true},{"id":"1417404484855103490","deptName":"撒旦发射点发射点发","level":3,"children":[{"id":"1420303669854068737","deptName":"吃的是草","level":4,"children":null,"deptId":"1417404484855103490"}],"deptId":"1413306765261570049"},{"id":"1417405551152037889","deptName":"22","level":3,"children":testChildren,"deptId":"1413306765261570049"}],"deptId":"1"},{"id":"1414481245421940738","deptName":"测试名称","level":2,"children":[{"id":"1414488946923253761","deptName":"ces","level":3,"children":[{"id":"1417405748556955650","deptName":"草草草草","level":4,"children":null,"deptId":"1414488946923253761"}],"deptId":"1414481245421940738"}],"deptId":"1"},{"id":"1414488327961423874","deptName":"test1","level":2,"children":null,"deptId":"1"},{"id":"1414760771527778306","deptName":"测试1","level":2,"children":null,"deptId":"1"},{"id":"1415838207636131841","deptName":"test12345","level":2,"children":null,"deptId":"1"},{"id":"1417404643252994050","deptName":"啊啊啊啊啊","level":2,"children":null,"deptId":"1"},{"id":"1417405267218628609","deptName":"1成都市","level":2,"children":null,"deptId":"1"},{"id":"1417405530910326786","deptName":"阿斯顿发射点发射点发射点","level":2,"children":null,"deptId":"1"}],"deptId":"0"}]
        console.log("tree", tree)
        this.setData(tree)
      },
      /**
       * 获取车辆数, 是否清空原数据(已选中等数据)
       * @param clear
       * @returns {Promise<void>}
       */
      async getVehicleTree() {
        await this.$nextTick()
        this.setTree()
      },
      setData(data, clear = true) {
        if (this.$refs['huge-tree']) {
          this.$refs['huge-tree'].setData(data, clear)
          return true
        }
        return false
      },
      onClickCheckbox(e) {
        this.$emit('onClickCheckBox', e)
      },
      onRightClick(e, node) {
        this.$emit('onRightClickItem', e, node)
      },
      onClickItem(e) {
        this.$emit('onClickItem', e)
      },
      fold(bool = true) {
        this.$emit('expand', !bool)
        this.expand = !bool
      },
      getCheckedKeys() {
        return this.$refs['huge-tree'] && this.$refs['huge-tree'].getCheckedKeys()
      },
      getCheckedNodes() {
        return this.$refs['huge-tree'] && this.$refs['huge-tree'].getCheckedNodes()
      },
      setCheckedKeys(keys = []) {
        return this.$refs['huge-tree'] && this.$refs['huge-tree'].setCheckedKeys(keys)
      },
      setCheckedNodes(nodes = []) {
        return this.$refs['huge-tree'] && this.$refs['huge-tree'].setCheckedNodes(nodes)
      },
      getAllData() {
        return this.$refs['huge-tree'] && this.$refs['huge-tree'].getAllData()
      },
      update() {
        this.$refs['huge-tree'] && this.$refs['huge-tree'].update()
      }
    }
  }
</script>

<style rel="stylesheet" lang="scss" scoped>
  .virtual-tree-box {
    height: 80vh;
    position: relative;
    &::v-deep .dept-tree-label {
      display: flex;
      align-items: center;
      width: 100%;
      .label-box {
        height: 32px;
        line-height: 32px;
        display: flex;
        align-items: center;
        width: 100%;
        .dept-and-count {
          display: flex;
          width: 100%;
          padding-right: 16px;
          font-size: 14px;
          font-weight: 400;
          color: #606266;
          line-height: 32px;
          > div:first-child {
            /*flex: 1;*/
            /*white-space: nowrap;*/
            /*width: 80px;*/
            /*text-overflow:ellipsis;*/
            overflow: hidden;
            height: 32px;
            line-height: 32px;
          }
          > div:last-child {
            flex-shrink: 0;
            color: #999;
            margin-left: 4px;
          }
        }
        .vehicle-icon {
          width: 24px;
          height: 24px;
          margin-right: 8px;
          background-repeat: no-repeat;
          background-position: center;
        }
        .vehicle-text {
          font-size: 14px;
          font-weight: 400;
          color: #666666;
          line-height: 24px;
        }
        .dept-text {
          font-size: 14px;
          font-weight: 400;
          color: #606266;
          line-height: 24px;
        }
      }
    }
    &::v-deep .tree-content {
      right: 30px !important;
    }
    .expand-icon {
      width: 8px;
      height: 8px;
      background-position: center;
      background-repeat: no-repeat;
    }
    .bottom-btn {
      position: absolute;
      bottom: 12px;
      left: 0;
      width: 100%;
      text-align: center;
      font-size: 12px;
      font-weight: 400;
      color: blue;
      line-height: 24px;
      > span {
        cursor: pointer;
      }
    }

    &::v-deep .vehicle-tree-item {
      position: relative;
    }
  }
</style>
